<template>
	<div class="details-container">
        <p class="catalogue">
            <router-link to="/alumni" replace>校友服务</router-link>
            <router-link to="/alumni/news" replace> > 新闻资讯</router-link>
            <span> > 资讯详情</span>
        </p>
        <div class="clear">
            <section class="fl">
                <p class="title">{{summary.title}}</p>
                <p class="publish">
                    发布：<span class="time">{{summary.update_time}}</span>&nbsp;&nbsp;
                    来源：<span class="orgin">{{summary.username}}</span>
                </p>
                <img v-if="summary && summary.pic" :src="BASE_URL + summary.pic" alt="文章海报" />
                <div class="summary" v-html="summary.content"></div>
            </section>
            <aside class="fr">
                <dl>
                    <dt><router-link to="/alumni/news" tag="p">更多新闻</router-link></dt>
                    <dd v-for="(item,key) in newsList" :key="key">
                        <router-link :to="{path:'/alumni/details',query:{id:item.id,type:item.type}}">{{item.title}}</router-link>
                    </dd>
                </dl>
            </aside>
        </div>
    </div>
</template>

<script>
    export default {
	data(){
		return {
            id:this.$route.query.id,    // 文章id
            type:this.$route.query.type,    // 文章类型  1：轮播文章；2：普通文章
            newsList:[],    // 存放文章的信息列表
            summary:'',    // 存放文章详情信息
		}
	},
    created(){
        // 获取轮播图信息
        this.getNews();

        // 获取文章详情信息
        this.getSummary()
    },
	methods:{
        getNews(){
            let success = res => {
                // console.log(res)
                // this.newsList = res.data.data.slice(0,7);
                this.newsList = res.data.data.reverse();
            }
            this.$ajax({
                url: "/api/alumni/alumniNews",
                method: "get",
                params: {
                    type: this.$route.query.type,    // 1：轮播文章；2：普通文章
                    page_index: 1,
                    page_size: 7,  
                    data_type: 1,    // 0：没有分页 ； 1：有分页
                    order: 'top'    // time：创建时间倒序（适用于后台列表）；top：置顶倒序（适用于前台列表）
                },
                func: { success: success }
            })
        },
		getSummary(){
			let success = res => {
                // console.log(res)
                this.summary = res.data;
            };
            this.$ajax({
                url: "/api/alumni/alumniNews",
                method: "get",
                params: {
                    id:this.id,    // 文章id
                    type:this.type    // 1：轮播文章；2：普通文章
                },
                func: { success: success }
            });
		}
	}
    }
</script>


<style lang="scss">
    #alumni{
        .details-container{
            width:1200px;
            margin:0 auto;

            // 目录
            .catalogue{
                // padding-top:15px;
                height:19px;
                line-height:19px;
                font-size: 14px;
                color: #000000;
                letter-spacing: 0;
                span,a{
                    &:last-child{
                        color: #3F3F3F;
                    }
                }
            }

            &>div{
                margin-top:20px;
                margin-bottom:58px;
                section{
                    padding:63px 41px 54px;
                    width:800px;
                    background: #fff;
                    .title{
                        font-size: 24px;
                        font-weight:600;
                        color: #000000;
                        letter-spacing: 0;
                        line-height: 24px;
                    }
                    .publish{
                        margin-top:40px;
                        width:100%;
                        font-size: 12px;
                        color: #888888;
                        letter-spacing: 0;
                    }
                    &>img{
                        margin-top:30px;
                        width:100%;
                        object-fit:contain;
                    }
                    &>div{
                        margin-top:40px;
                        font-size: 14px;
                        line-height:28px;
                        color: #000000;
                        letter-spacing: 0;
                        text-align:justify;
                        word-break: break-all
                    }
                }
                aside{
                    box-sizing:border-box;
                    padding:30px 20px;
                    width:300px;
                    height:440px;
                    background: #fff;
                    overflow:hidden;
                    dl{
                        dt{
                            margin-bottom:5px;
                            font-weight:600; 
                            cursor:pointer;
                        }
                        dd{
                            display:flex;
                            align-items:center;
                            padding:8px 0;
                            width:100%;
                            height:38px;
                            border-bottom: 1px solid #EFEFEF;
                            p{
                                line-height:19px;
                                font-size: 14px;
                                color: #333333;
                                letter-spacing: 0;
                                vertical-align:middle;
                                display: -webkit-box; 
                                -webkit-line-clamp: 2; 
                                -webkit-box-orient: vertical; 
                                overflow: hidden;
                                text-align:left; 
                            }
                            &:last-child{
                                border: 0 none;
                            }
                        }
                    }
                }
            }
        }
    }
</style>